<template>
  <div class="engineering-configuration">
    <!-- 右边内容 -->
    <div class="right page-wrap">
      <div class="right-head">
        <div class="head-item">
          <div class="head-title">材料申领审批人设置</div>
          <a-button type="text" @click="handelOpenFlow">配置审批人</a-button>
        </div>
        <div class="head-item">
          <div class="head-title">材料申领人是否可见商品成本</div>
          <a-radio-group v-model="paramData.showApplyGoodsCost" @change="showApplyGoodsCostChange">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </div>
      </div>
      <a-tabs v-model="activeName" class="demo-tabs" @tab-click="tabsChange">
        <a-tab-pane v-for="item in tabsOptions" :key="item.portraitId" :title="item.portraitName"></a-tab-pane>
      </a-tabs>
      <div class="right-table">
        <a-table
          class="table-wrap"
          :columns="columns"
          :data="tableData"
          :pagination="false"
          :scroll="{ x: '100%', y: '100%' }"
          :scrollbar="true"
        >
          <template #status="{ rowIndex }">
            <a-tag color="arcoblue">启用</a-tag>
          </template>
          <template #isBuyGoods="{ rowIndex }">
            <a-checkbox-group v-model="tableData[rowIndex].isBuyGoods" @change="tableChange($event, tableData[rowIndex])">
              <a-checkbox value="1">需采买</a-checkbox>
            </a-checkbox-group>
          </template>
          <template #buyRemindDays="{ rowIndex }">
            <a-input-number
              v-if="tableData[rowIndex].isBuyGoods.length > 0"
              v-model="tableData[rowIndex].buyRemindDays"
              :min="0"
              :precision="0"
              hide-button
              @change="tableChange($event, tableData[rowIndex])"
            />
          </template>
          <template #isCustomerBuy="{ rowIndex }">
            <a-checkbox-group
              v-if="tableData[rowIndex].isBuyGoods.length > 0"
              v-model="tableData[rowIndex].isCustomerBuy"
              @change="tableChange($event, tableData[rowIndex])"
            >
              <a-checkbox value="1">可自购</a-checkbox>
            </a-checkbox-group>
          </template>

          <template #buyRemark="{ rowIndex }">
            <a-input
              v-if="tableData[rowIndex].isBuyGoods.length > 0"
              v-model="tableData[rowIndex].buyRemark"
              placeholder="请输入"
              allow-clear
              @change="tableChange($event, tableData[rowIndex])"
            />
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import {
  selectList,
  portraitList,
  getStageTaskSettingList,
  setParams,
  modifyStageTaskSetting
} from "@/apis/engineeringSettings/materialConfiguration";
import { useUserStore } from "@/stores";
const userStore = useUserStore();
const props = defineProps(["width"]);
const emit = defineEmits(["openFlow"]);
import { Message } from "@arco-design/web-vue";
import { values } from "lodash";

// 是否可见商品成本
const paramData = ref({
  showApplyGoodsCost: false
});

const activeName = ref<number | string>(1);
const tabsOptions = ref([]);

const tabsChange = (val: number | string) => {
  if (activeName.value == val) return;
  tableData.value = [];
  activeName.value = val;
  getStageTaskSettingListApi();
};

const columns = [
  {
    title: "任务名称",
    dataIndex: "taskName"
  },
  {
    title: "负责人",
    dataIndex: "roleName"
  },
  {
    title: "状态",
    dataIndex: "status",
    slotName: "status"
  },
  {
    title: "是否需要材料采买",
    dataIndex: "isBuyGoods",
    slotName: "isBuyGoods"
  },
  {
    title: "采买提醒时间任务开始前X天下单",
    dataIndex: "buyRemindDays",
    slotName: "buyRemindDays"
  },
  {
    title: "是否支持客户自购",
    dataIndex: "isCustomerBuy",
    slotName: "isCustomerBuy"
  },
  {
    title: "相关备注说明",
    dataIndex: "buyRemark",
    slotName: "buyRemark"
  }
];
const tableData = ref([]);

const tableChange = async (val: number | string, row: object) => {
  console.log(row.isBuyGoods.join(""));
  if (row.isBuyGoods.length == 0) {
    row.buyRemindDays = 0;
    row.isCustomerBuy = [];
    row.buyRemark = "";
  }
  let data = {
    taskSettingId: row.taskSettingId,
    isBuyGoods: row.isBuyGoods.join("") == 1 ? 1 : 0,
    buyRemindDays: !row.buyRemindDays ? 0 : row.buyRemindDays,
    isCustomerBuy: row.isCustomerBuy.join("") == 1 ? 1 : 0,
    buyRemark: row.buyRemark
  };
  console.log(data);
  const res = await modifyStageTaskSetting(data);
  Message.success("修改成功");

  getStageTaskSettingListApi();
};

const handelOpenFlow = () => {
  let data = {
    title: "材料申领审批人设置",
    desc: "",
    params: { formId: `form-material-apply-${userStore.userInfo?.tenantId}` }
  };
  emit("openFlow", data);
};

// 查询是否可见
const selectListApi = async () => {
  const res = await selectList();
  paramData.value = res.data;
};

// 查询tabs
const portraitListApi = async () => {
  const res = await portraitList();
  tabsOptions.value = res.data || [];
  activeName.value = res.data[0].portraitId;
  getStageTaskSettingListApi();
};

// 获取任务模板配置
const getStageTaskSettingListApi = async () => {
  const res = await getStageTaskSettingList(activeName.value);
  res.data.forEach(item => {
    item.isBuyGoods = item.isBuyGoods == 1 ? String(item.isBuyGoods).split("") : [];
    item.isCustomerBuy = item.isCustomerBuy == 1 ? String(item.isCustomerBuy).split("") : [];
  });
  tableData.value = res.data || [];
};

const showApplyGoodsCostChange = async () => {
  let param = {
    paramId: paramData.value.paramId,
    showApplyGoodsCost: paramData.value.showApplyGoodsCost
  };
  const res = await setParams(param);
  Message.success("修改成功");
};

onMounted(() => {
  selectListApi();
  portraitListApi();
});
</script>
<style scoped lang="scss">
@import "@/styles/mixin";
.engineering-configuration {
  height: 100%;
  @include flex;
}

.page-wrap {
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
}
// 标题
.box-title {
  padding-left: 20px;
  display: -webkit-flex;
  align-items: center;
  margin-bottom: 16px;

  &-circle {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 9px;
    border-radius: 50%;
    background-color: #409eff;
  }

  &-label {
    display: inline-block;
    font-size: 18px;
    color: #131414;
    line-height: 24px;
  }
}
.right {
  padding: 20px 0;
  width: 100%;
  .right-head {
    padding: 0 20px;
    .head-item + .head-item {
      margin-top: 10px;
    }
    .head-item {
      @include flex-between;
      @include flex-align;
      height: 40px;
      line-height: 40px;
      background: #f5f7fa;
      border-radius: 4px 4px 4px 4px;
      padding: 0 20px;
    }
  }
  .demo-tabs {
    margin-top: 20px;

    ::v-deep(.el-tabs__header) {
      margin: 0;
    }
    ::v-deep(.arco-tabs-nav) {
      padding-left: 20px;
    }
    ::v-deep(.arco-tabs-content) {
      padding: 0;
    }
  }
  .right-table {
    padding: 0 20px;
    height: calc(100vh - 345px);
    overflow: hidden;
    padding-top: 20px;

    // table表头样式
    .table-wrap {
      // border: 1px solid #ebeef5;
      // border-right: none;
      // margin-top: 20px;
      ::v-deep(.el-table__header) {
        th {
          background-color: #f2f6fc !important;
          color: #909399;
        }
      }

      ::v-deep(.el-table__row--striped) {
        td {
          background: #f5f7fa !important;
        }
      }

      ::v-deep(.el-input-number) {
        .el-input__inner {
          text-align: left;
        }
      }
    }
  }
}
</style>
